<template>
  <div>
    <div class="icon" :width="isCollapse ? '64px' : '200px'">
      <span v-if="isCollapse === false" slot="title"><img style="width: 50px; margin-left: 60px" src="../../assets/logo.png" alt="" /></span>
    </div>
    <el-menu :width="isCollapse ? '64px' : '200px'" :default-active="$route.path" unique-opened class="el-menu-vertical-demo" :collapse-transition="false" @open="handleOpen" @close="handleClose" background-color="#112f50" text-color="#fff" active-text-color="#409eff" :collapse="isCollapse" router>
      <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
        <i :class="'el-icon-' + item.icon"></i>
        <!-- <span slot="title">{{ item.label }}</span> -->
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <el-submenu :index="item.label" v-for="(item, index) in hasChildren" :key="index">
        <template slot="title">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item class="lastMenu" :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">
            <i :class="'el-icon-' + subItem.icon"></i>
            <span slot="title">{{ subItem.label }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'FirstProjectMenu',
  props: ['isCollapse'],

  computed: {
    noChildren() {
      return this.asideMenu.filter(item => !item.children)
    },
    hasChildren() {
      return this.asideMenu.filter(item => item.children)
    },
    asideMenu() {
      return [
        {
          path: '/home',
          name: 'home',
          label: this.$t('menu.home'),
          icon: 's-home'
        },
        {
          path: '/user',
          name: 'user',
          label: this.$t('menu.user'),
          icon: 'user'
        },
        {
          path: '/carousel',
          name: 'carousel',
          label: this.$t('menu.carousel'),
          icon: 'picture-outline'
        },
        {
          path: '/goods',
          name: 'goods',
          label: this.$t('menu.goods'),
          icon: 's-goods'
        },
        {
          path: '/order',
          name: 'order',
          label: this.$t('menu.order'),
          icon: 's-order'
        },
        {
          path: '/notice',
          name: 'notice',
          label: this.$t('menu.notice'),
          icon: 'chat-line-square'
        },

        {
          label: this.$t('menu.tool'),
          icon: 'setting',
          children: [
            // {
            //   path: '/contract',
            //   name: 'contract',
            //   label: this.$t('menu.contract'),
            //   icon: 'document'
            // },
            // {
            //   path: '/invoice',
            //   name: 'invoice',
            //   label: this.$t('menu.invoice'),
            //   icon: 'document-copy'
            // },
            {
              path: '/table',
              name: 'table',
              label: this.$t('menu.table'),
              icon: 's-grid'
            }
          ]
        }
      ]
    }
  },

  data() {
    return {
      // asideMenu: [
      //   {
      //     path: '/home',
      //     name: 'home',
      //     label: this.$t('menu.home'),
      //     icon: 's-home'
      //   },
      //   {
      //     path: '/user',
      //     name: 'user',
      //     label: this.$t('menu.user'),
      //     icon: 'user'
      //   },
      //   {
      //     label: '轮播图',
      //     icon: 'picture',
      //     children: [
      //       {
      //         path: '/carousel',
      //         name: 'carousel',
      //         label: '轮播图',
      //         icon: 'picture-outline'
      //       },
      //       {
      //         path: '/ShowCarousel',
      //         name: 'ShowCarousel',
      //         label: '轮播图展示',
      //         icon: 'picture-outline-round'
      //       }
      //     ]
      //   },
      //   {
      //     path: '/goods',
      //     name: 'goods',
      //     label: '商品管理',
      //     icon: 's-goods'
      //   },
      //   {
      //     path: '/order',
      //     name: 'order',
      //     label: '订单管理',
      //     icon: 's-order'
      //   },
      //   {
      //     path: '/notice',
      //     name: 'notice',
      //     label: '公告',
      //     icon: 'chat-line-square'
      //   },
      //   {
      //     path: '/contract',
      //     name: 'contract',
      //     label: '合同',
      //     icon: 'document'
      //   },
      //   {
      //     label: '工具',
      //     icon: 'setting',
      //     children: [
      //       {
      //         path: '/invoice',
      //         name: 'invoice',
      //         label: '下载发票',
      //         icon: 'document-copy'
      //       },
      //       {
      //         path: '/table',
      //         name: 'table',
      //         label: '导出表格',
      //         icon: 's-grid'
      //       }
      //     ]
      //   }
      // ]
    }
  },

  mounted() {},

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    clickMenu(item) {
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 200px;
  height: 60px;
}
.el-menu {
  border-right: 0;
  transition: all 10ms;
  .is-active {
    background: #1e78bf !important;
    color: #fff !important;
  }
}
::v-deep .lastMenu {
  padding-left: 35px !important;
}
::v-deep .el-menu-item-group__title {
  padding: 0 !important;
}
</style>
